<style>
</style>
<template>
  <!-- 头部搜索区 -->
  <div style="margin-bottom: 10px;">
    <span>房产名称：</span>
    <el-input v-model="searchText" style="width: 240px;margin-right: 10px;" placeholder="请输入房产名称" />
    <span>状态：</span>
    <el-radio-group v-model="searchState" class="ml-4">
      <el-radio :value="2"  size="large" :checked="true">全部</el-radio>
      <el-radio :value="0"   size="large">闲置</el-radio>
      <el-radio :value="1"  size="large">售出</el-radio>
    </el-radio-group>
    <el-button :icon="Search" type="primary" @click="btnSearch()" plain style="margin-left: 10px;">查询</el-button>
  </div>
  <!-- 表格数据展示区 -->
  <div>
    <el-table :data="tableData" style="width: 100%">
    <el-table-column label="房产编号" prop="Hnumber" />
    <el-table-column label="房产名称" prop="Hname" width="200px" />
    <el-table-column label="房产规格" prop="HSpecifications" />
    <el-table-column label="房主名称" prop="Orealname" />
    <el-table-column label="联系方式" prop="Htelephone" />
    <el-table-column label="房子备注" prop="Hremark">
      <template #default="scope">
        <el-tag type="warning">{{ scope.row.Hremark }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="状态" prop="Hstate">
      <template #default="scope">
        <el-tag  :type="scope.row.Hstate == 0 ? 'danger':'success'">{{ scope.row.Hstate == 0 ? "闲置":"售出" }}</el-tag>
      </template>
    </el-table-column>
  </el-table>
  </div>
  <!-- 分页 -->
  <el-config-provider :locale="locale">
  <div class="demo-pagination-block" style="margin-top: 10px;">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[5, 10, 20, 50,100]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</el-config-provider>
</template>

<script setup >
import { ref,onMounted,reactive } from 'vue'
import {Search} from '@element-plus/icons-vue'
import axios from 'axios'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

//存储表格数据信息
let tableData = ref([]);

//搜索信息
var searchText = ref("");

//条件查询状态
var searchState = ref(2);

//设置分页中文显示
const locale = ref(zhCn)


//页码数
const currentPage = ref(1)
//页条数
const pageSize = ref(5)
//总条数
var total = ref(0)

//切换页条数
const handleSizeChange = (val) => {
  bindData(currentPage.value,val,searchState.value,searchText.value)
}

//切换页数
const handleCurrentChange = (val) => {
  bindData(val,pageSize.value,searchState.value,searchText.value)
}
//组件加载完毕后执行
onMounted(()=>{
  bindData(currentPage.value,pageSize.value,searchState.value,searchText.value)
})

//通过名称条件查询
function btnSearch() {
  bindData(currentPage.value,pageSize.value,searchState.value,searchText.value)
}

//绑定表格数据
function bindData(page,limit,state,strName){
  axios.get(`https://localhost:7090/api/HouseInfo?page=${page}&limit=${limit}&state=${state}&strName=${strName}`)
  .then((res)=>{
    console.log(res.data);
    tableData.value = res.data.data;
    total.value = res.data.total;
  })
}


</script>